<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>微博图床-Powerby岩兔站</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/webuploader.css">
    <link rel="stylesheet" type="text/css" href="css/webuploader.style.css">

    <style>
    .progress{
        margin-bottom:0;background:none;border-radius:0;box-shadow: none;
    }
    #uploader .filelist li{height: auto;}
    #uploader .filelist li .success{bottom:34px}
    .footer{width:100%; height:60px; border-top:1px solid #ccc; background:#eee;text-align:center;}
    .footer p{line-height:50px;font-size:12px;color:#666;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="container">
            <!--头部，相册选择和格式选择-->

            <div id="uploader">
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                        <p>或将照片拖到这里，单次最多可选300张</p>
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div><div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                    </div>
                </div>
            </div>
        </div>

        <div id="container" style="padding:10px 5%;">
            <h4 class="h4" style="width:100%; padding-bottom:10px; border-bottom: 1px solid #ddd">水印设置</h4>
            <form class="form-horizontal">
                <div class="form-group">
                  <label for="WmEnable" class="col-sm-2 control-label">水印</label>
                  <div class="col-sm-10">
                    <div class="checkbox">
                      <label>
                        <input id="WmEnable" name="WmEnable" type="checkbox"> 启用水印
                      </label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="WmUrl" class="col-sm-2 control-label">水印图</label>
                  <div class="col-sm-10">
                    <input type="url" class="form-control" id="WmUrl" name="WmUrl" placeholder="请输入水印URL，如：https://yantuz.cn/wp-content/uploads/2018/03/logourl.png" value="https://yantuz.cn/wp-content/uploads/2018/03/logourl.png">
                    <br />
                    <img class="img-responsive" id="WmImgUrl" src="https://yantuz.cn/wp-content/uploads/2018/03/logourl.png"/>
                    </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">水印位置</label>
                  <div class="col-sm-10">
                    <select id="WmPostion" name="WmPostion" class="form-control" >
                        <option value="top-left">左上</option>
                        <option value="top">上</option>
                        <option value="top-right">右上</option>
                        <option value="left">左</option>
                        <option value="center">中</option>
                        <option value="right">右</option>
                        <option value="bottom-left">左下</option>
                        <option value="bottom">下</option>
                        <option value="bottom-right">右下</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label for="WmOpacity" class="col-sm-2 control-label">透明度</label>
                  <div class="col-sm-10">
                        <input id="WmOpacity" class="form-control" name="WmOpacity" type="number" value="50">
                  </div>
                </div>
                <h4 class="h4" style="width:100%; padding-bottom:10px; border-bottom: 1px solid #ddd">图像缩放</h4>
                <div class="form-group">
                  <label for="WmWidth" class="col-sm-2 control-label">自定义大小</label>
                  <div class="col-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon">宽</span>
                            <input type="number" class="form-control" id="WmWidth" value="800">
                            <span class="input-group-addon">高</span>
                            <input type="number" class="form-control" id="WmHeight" value="0">
                        </div>
                  </div>
                </div>
                <!-- <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary">保存</button>
                  </div>
                </div> -->
              </form>
        </div>
    </div>
<div class="footer">
    <p>&copy; <a href="https://yantuz.cn/" title="岩兔站-关注互联网折腾服务器分享码农的日常">岩兔站</a> 
    <a title="[原创]新浪微博图床 自动水印 自动调整大小" href="https://yantuz.cn/376.html">交流/教程</a>
    本站开源：<a href="https://github.com/yhf7952/weiboUploader-Watermark">GitHub</a>
    欢迎关注：<a href="https://weibo.com/yztop">新浪微博</a></p>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdn.bootcss.com/clipboard.js/2.0.0/clipboard.min.js"></script>
<script type="text/javascript" src="js/webuploader.html5only.min.js"></script>
<script type="text/javascript" src="js/upload.js"></script>
<script>
    $(function(){
        //默认值
        $("#WmEnable").prop("checked",$.cookie("WmEnable")=="on");
        $("#WmOpacity").val($.cookie("WmOpacity") || 50);
        $("#WmWidth").val($.cookie("WmWidth") || 800);
        $("#WmHeight").val($.cookie("WmHeight") || 0);
        $("#WmUrl").val($.cookie("WmUrl")|| "https://yantuz.cn/wp-content/uploads/2018/03/logourl.png");
        $("#WmImgUrl").attr("src",$.cookie("WmUrl") || "https://yantuz.cn/wp-content/uploads/2018/03/logourl.png");
        $("#WmPostion").val($.cookie("WmPostion")|| "bottom-right");
    });

    //启用水印
    $("#WmEnable").click(function(){
        if($(this).is(":checked")){
            $.cookie("WmEnable","on");
        }else{
            $.cookie("WmEnable","");
        }
    });

    //水印图
    $("#WmUrl").blur(function(){
        $.cookie("WmUrl",$(this).val());
        $("#WmImgUrl").attr("src",$(this).val());
    });

    //位置
    $("#WmPostion").change(function(){
        $.cookie("WmPostion",$(this).val());
    });

    //透明度
    $("#WmOpacity").change(function(){
        $.cookie("WmOpacity",$(this).val());
    });


    //宽高
    $("#WmWidth").blur(function(){
        $.cookie("WmWidth",$(this).val());
    });
    $("#WmHeight").blur(function(){
        $.cookie("WmHeight",$(this).val());
    });
</script>
</body>
</html>